<script setup>
import HeadTitle from "../../components/start/HeadTitle.vue";
import Rodiu from "../../components/start/Rodiu.vue";
import BlockBox from "../../components/Home/BlockBox.vue";
import ItemBox from "../../components/Home/ItemBox.vue";
import { useRouter } from "vue-router";
import { ref, toRef, toRefs, reactive, onMounted } from "vue";
import {
  FristClassapi,
  GetMajorapi,
  GetLeftTitleapi,
  GetTopTabapi,
  GetBannerapi,
  GetLiveTodayapi,
  GetPubCourseapi,
  GetTabDataapi,
} from "../../http/api";
const router = useRouter();
const show = ref(true);
const showT = ref(false);
const showF = ref(false);
const fatherid = ref("");
const FirstList = ref([]);
const GetMajor = ref([]);
const sontitle = ref("");
const joblist = ref(["在校生", "在职"]);
const sonestid = ref("");
const Publictitle = ref("选择类型");
const tabList = ref([]);
const tabID = ref(1);
const Bannerlist = ref([]);
const flag = ref(false);
const Course = ref({});
const Courselist = ref([]);
const TabItemList = ref([]);
// const cur=ref('0')
// 一级数据
FristClassapi().then((res) => {
  console.log("启动页数据", res);
  FirstList.value = res.data.data;
});
// 展示二级
onMounted(() => {
  sonestid.value = localStorage.getItem("sonestid") || "";
  fatherid.value = localStorage.getItem("fatherid") || "";
  JumpHome()
  if (fatherid.value==='') {
    show.value = true;
   
  } else {
    show.value = false;
  }
  GetLeftTitleapi(fatherid.value).then((res) => {
    console.log("左部导航标题", res);
    // console.log(sonestid.value,fatherid.value);
    Publictitle.value = res.data.data.title;
  });
  
});
const JumpDetail = (id, title) => {
  console.log(id);
  fatherid.value = id;
  localStorage.setItem("fatherid", fatherid.value);
  // 二级标题
  sontitle.value = title;
  // 获取二级
  GetMajorapi(id).then((res) => {
    console.log("启动页子级数据", res);
    GetMajor.value = res.data.data;
  });
  show.value = false;
  showT.value = true;
};
const OpenSon = () => {
  showT.value = false;
  showF.value = true;
};
const JumpSonest = (id) => {
  console.log(id);
  sonestid.value = id;
  console.log(sonestid.value);
  localStorage.setItem("sonestid", sonestid.value);
};
const JumpHome = () => {
  GetLeftTitleapi(fatherid.value).then((res) => {
    console.log("左部导航标题", res);
    // console.log(sonestid.value,fatherid.value);
    Publictitle.value = res.data.data.title;
  });
  showF.value = false;
  getviews();
  getbanner(tabID.value);
  getlive();
  getPubCourse();
  getTabdata();
};

// 获取tab
const getviews = () => {
  GetTopTabapi(fatherid.value).then((res) => {
    console.log("tab", res);
    tabList.value = res.data.data;
    tabList.value.unshift({ id: 1, title: "精选" });
    console.log(tabList.value);
    flag.value = true;
  });
};
// tab点击事件
const onClickTab = (e) => {
  console.log(e);
  tabID.value = e.name;
  getbanner(tabID.value);
  GetPubCourseapi(tabID.value).then((res) => {
    console.log("tab公开课", res);
  });
  getTabdata();
};
// 获取轮播图
const getbanner = () => {
  GetBannerapi(tabID.value).then((res) => {
    console.log("轮播", res);
    Bannerlist.value = res.data.data;
  });
};
// 获取今日直播
const getlive = () => {
  GetLiveTodayapi(sonestid.value).then((res) => {
    console.log("今日直播", res);
  });
};
// 获取近期公开课
const getPubCourse = () => {
  GetPubCourseapi(tabID.value).then((res) => {
    console.log("近期公开课", res);
    Course.value = res.data.data;
    Courselist.value = res.data.data.course_list.slice(0, 3);
    console.log("111", Course.value);
  });
};

const getTabdata = () => {
  GetTabDataapi({ id: tabID.value }).then((res) => {
    console.log("tab数据", res);
    TabItemList.value = res.data.data;
    // console.log('tab数据',res.data.data);
    localStorage.setItem("tabid", tabID.value);
  });
};
// 头部打开弹出框
const openshow = () => {
  // JumpDetail()
  GetMajorapi(id).then((res) => {
    console.log("启动页子级数据", res);
    GetMajor.value = res.data.data;
  });
  showF.value = true;

};
const OpenT = () => {
  showT.value = true;
  showF.value = false;
};
const OPenOne = () => {
  showT.value = false;
  show.value = true;
};
const JumpList = () => {
  router.push({ path: "/publiclist", query: { id: tabID.value } });
};
</script>
<template>
  <div>
    <head-title :title="Publictitle" @open="openshow"></head-title>
    <div v-show="flag">
      <van-tabs v-model:active="tabID" @click-tab="onClickTab">
        <van-tab
          v-for="(item, index) in tabList"
          :key="item.id"
          :name="item.id"
          :title="item.title"
        >
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in Bannerlist" :key="item.id">
              <img :src="item.banner_img" alt="" />
            </van-swipe-item>
          </van-swipe>
          <van-button
            type="warning"
            size="mini"
            class="_tab_btn"
            v-for="(val, ex) in item.child"
            :key="val.id"
            >{{ val.title }}</van-button
          >
        </van-tab>
      </van-tabs>
      <div class="_live_today">
        <div class="_live_today_fisrt">
          <span>今日</span><span class="_live_today_orange">直播</span>
        </div>
        <div class="_live_today_second">19:00刷题巩固提升</div>
      </div>
      <div>
        <block-box
          v-show="tabID === 1"
          :couretitle="Course.model_name"
          @JumpList="JumpList"
          :item="Courselist"
          :Course="Course"
        ></block-box>
        <item-box :data="TabItemList"></item-box>
      </div>
    </div>

    <van-popup v-model:show="show" position="bottom">
      <div class="_popup_text">
        <div></div>
        <div>选择类型</div>
        <div></div>
      </div>
      <rodiu
        v-for="item in FirstList"
        :key="item.id"
        :title="item.title"
        :detail="item.brief"
        @click="JumpDetail(item.id, item.title)"
      ></rodiu>
    </van-popup>
    <van-popup v-model:show="showT" position="bottom">
      <div class="_popup_text">
        <van-icon name="arrow-left" @click="OPenOne" />
        <div>{{ sontitle }}</div>
        <div></div>
      </div>
      <rodiu
        v-for="(item, index) in joblist"
        :key="index"
        :title="item"
        @click="OpenSon"
      ></rodiu>
    </van-popup>

    <van-popup v-model:show="showF" position="bottom">
      <div class="_popup_text">
        <van-icon name="arrow-left" @click="OpenT" />
        <div>{{ sontitle }}</div>
        <div v-if="sonestid == ''"></div>
        <div class="finnished_btn" v-else @click="JumpHome">完成</div>
      </div>
      <rodiu
        v-for="item in GetMajor"
        :key="item.major_id"
        :title="item.major_name"
        @click="JumpSonest(item.major_id)"
      ></rodiu>
    </van-popup>
  </div>
</template>
<style scoped>
._popup_text {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
.finnished_btn {
  width: 100px;
  height: 60px;
  background-color: orange;
  text-align: center;
  line-height: 60px;
  border-radius: 20px;
  font-size: 28px;
  color: #fff;
}
.active {
  background-color: orange;
}
._tab_btn {
  margin-left: 20px;
}
.my-swipe {
  width: 100%;
  height: 320px;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
._live_today {
  width: 85%;
  height: 60px;
  background-color: white;
  border-radius: 30px;
  margin: auto;
  display: flex;
  line-height: 40px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}
._live_today_fisrt {
  width: 30%;
  /* height: 100%; */
  text-align: center;
  font-family: "方正粗黑简体";
  font-weight: 900;
}
._live_today_second {
  width: 70%;
  /* height: 100%; */
  font-size: 28px;
  border-left: 2px solid grey;
}
._live_today_orange {
  color: #f15e24;
}
</style>
